<template>
	<view class="pages">
		<view class="goods">
			<view class="img"><image :src="order_goods.product_image" mode=""></image></view>
			<view class="cont">
				<view class="tit">{{order_goods.goods_name}}</view>
				<view class="ftit">{{order_goods.spec}}</view>
				<view class="flex">
					<view class="price">￥{{order_goods.total_price}}</view>
					<view class="num">x {{order_goods.num}}</view>
				</view>
			</view>
		</view>
		<!-- 退款信息 -->
		<view class="retreats">
			<view class="rows">
				<view class="name">退款原因</view>
				<view class="cont" :class="isOk?'contColor':''" @click="togglePopup('bottom', 'share')"> {{retreat}} > </view>
			</view>
			<view class="rows">
				<view class="name">退款金额:</view>
				<view class="price"><input type="number" v-model="return_money"  placeholder-class="inpColor"/></view>
			</view>
			<view class="rows">
				<view class="name">退款说明:</view>
				<view class="input"><input type="text" v-model="description" placeholder="选填" placeholder-class="inpColor"/></view>
			</view>
		</view>
		
		<!-- 退款原因弹出层 -->
		<uni-popup ref="showshare" :type="type">
			<view class="refundBox">
				<view class="refFlex">
					<text class="refTit">退款原因</text>
				</view>
				<view class="refCont">
					<radio-group @change="radioChange">
						<label class="labelR" v-for="(item, index) in refundData" :key="item.value">
							<view class="info">{{item.name}}</view>
							<view class="radS">
								<radio :value="item.value" :checked="index === current" class="transformS" @click="cancel('share')"/>
							</view>
						</label>
					</radio-group>
				</view>
			</view>
		</uni-popup>
		<!-- 上传凭证 -->
		<view class="upload">
			<view class="tit">上传凭证</view>
			<!-- 拍摄 -->
			<view class="shotBox">
				<view class="shotImg">
					<view class="img" v-for="(img,index) in imgBox" :key="index" data-index="{index}" data-id="index">
						<image :src="img"></image>
						<text class="iconfont icon-shanchu" @click="delBtn(index)"></text>
					</view>
					<view class="shot" @click="chooseImage">
						<view class="icon"><text class="iconfont icon-paizhaoshebei"></text></view>
						<view class="shotInfo">上传凭证<text>(最多3张)</text></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 提交 -->
		<view class="btns" @click="submit">提交</view>
	</view>
</template>

<script>
	import uniPopup from '../../components/uniPopup.vue';
	import { mapState } from 'vuex';
	export default {
		components: {
			uniPopup
		},
		computed:{
			...mapState(['hasLogin','userInfo'])
		},
		data() {
			return {
				type: '',
				current: '',
				retreat:'请选择',
				isOk:false,
				return_money:0,
				imgBox:[],
				refundData: [
					{
						name:'商家库存不足',
						value:'商家库存不足',
						id:0,
					},
					{
						name:'商家漏发/错发',
						value:'商家漏发/错发',
						id:1
					},
					{
						name:'不想要了',
						value:'不想要了',
						id:2
					},
					{
						name:'产品质量问题',
						value:'产品质量问题',
						id:3
					},
					{
						name:'其它原因',
						value:'其它原因',
						id:4
					}
				],
				oid:'',
				detail_id:0,
				order_goods:'',
				description:'',
				host:this.$api._api.ApiHost
			}
		},
		onUnload() {
			this.imageSrc = '';
		},
		onLoad(options) {
			this.oid= options.oid
			this.detail_id= options.id
			this.getData()
		},
		methods: {
			getData(){
				var that = this
				var _param = {
					token:that.userInfo.token,
					oid:this.oid
				}
				that.$api.getUrl(that.$api._api.ApiOrderGoods,_param,function(res){
					res.map(re=>{
						if(re.id == that.detail_id){
							that.order_goods = re
							that.return_money = re.total_price
						}
					})
				})
			},
			submit(e){
				var that = this
				if(that.retreat == '请选择'){
					uni.showModal({
						title:'请选择退款原因'
					})
					return false;
				}
				if(that.imgBox.length <= 0){
					uni.showModal({
						title:'请上传凭证'
					})
					return false;
				}
				
				if(that.order_goods.total_price < this.return_money){
					uni.showModal({
						title:'退款金额不能大于商品支付金额'
					})
					return false;
				}
				var _param = {
					token:that.userInfo.token,
					oid:this.oid,
					product_id:that.order_goods.product_id,
					goods_id:that.order_goods.goods_id,
					order_detail_id:this.detail_id,
					return_money:this.return_money,
					reason:that.retreat,
					description:that.description,
					image:that.imgBox
				}
				
				that.$api.postUrl(that.$api._api.ApiReturnApply,_param,function(res){
			
					that.$api.msg('申请成功！')
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/user/order/order?status=0'
						})
					},1000)
				})
			},
			// 删除图片
			delBtn(index){
				this.imgBox.splice(index,1)
			},
			// 弹出层
			togglePopup(type, open) {
				this.type = type
				this.$nextTick(() => {
					this.$refs['show' + open].open()
				})
			},
			cancel(type) {
				this.$refs['show' + type].close()
			},
			// 退款原因弹框
			radioChange(evt) {
				for (let i = 0; i < this.refundData.length; i++) {
					if (this.refundData[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
				this.retreat = evt.detail.value
				this.isOk = true
			},
			upFile(filePath){
				let that = this;
				uni.uploadFile({
					url: this.$api._api.ApiUpUpImg,
					filePath: filePath,
					name: 'image',
					//formData:{token:that.userInfo.token,types:3,name:'refund'},
					success: (res) => {
						var data = JSON.parse(res.data)
						if(data.code == 200){
							this.imgBox.push(data.data.url);
						}
					},
					fail: (err) => {
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						});
					}
				})
			},
			// 上传图片
			chooseImage: function() {
				var that = this
				var len = that.imgBox.length
				if(len >= 3){
					that.$api.msg('最多上传3张')
					return false;
				}
				uni.chooseImage({
					count:3,
					sizeType:['compressed'],
					sourceType:['album'],
					success: (res) => {
						res.tempFilePaths.map(re=>{
							that.upFile(re)
						})
					},
					fail: (err) => {
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = res.authSetting['scope.album'];
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				})
			}
		},
		onBackPress() {
			this.$refs['showshare'].close()
		}
	}
</script>

<style lang="scss">
	.pages{background:#fff;padding-bottom: 120rpx;}
	.btns{background:#f04447;position: fixed;bottom: 0;left: 0;right: 0;color:#fff;text-align: center;
		height: 100rpx;line-height: 100rpx;font-size: 30rpx;}
	// 退款信息
	.retreats{
		border-top: 10rpx solid #eee;margin-top: 20rpx;padding:0 30rpx;
		.rows{height: 100rpx;line-height: 100rpx;display: flex;align-items: center;border-bottom:1px solid #eee;
			.name{width:160rpx;color:#666;}
			.price,.cont,.input{flex: 1;}
			.price{font-weight: bold;font-size: 28rpx;color:#f04447;}
			.cont{text-align: right;color:#999;}
			.contColor{color:#333;}
			.inpColor{font-size: 28rpx;color:#ccc;}
			.input input{color:#333;}
		}
	}
	/* 退款原因弹窗样式 */
	.refundBox{padding: 20rpx;background-color: #fff;
		.refFlex{position: relative;text-align: center;height: 40rpx;line-height: 80rpx;
			.refTit{font-size: 34rpx;color:#333;}
			.iconfont{font-size: 48rpx;position: absolute;right: 0;top: 0;color:#ccc;}
		}
		radio-group{width: 100%;}
		.refCont{margin-top:50rpx;margin-right: -10rpx;
			.labelR{height: 90rpx;display: flex;align-items:center}
			.labelR:not(:last-child){border-bottom: 2rpx solid #eee;}
			.info{flex: 1;}
		}
	
	}
	// 商品信息
	.goods{
		display: flex;margin-top: 1px;padding:30rpx;
		.img{width:220rpx;height:220rpx;overflow: hidden;border-radius: 6rpx;image{width: 100%;height: 100%;}}
		.cont{margin-left: 20rpx;flex: 1;}
		.tit{font-size: 30rpx;color:#555;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;
			-webkit-box-orient:vertical;-webkit-line-clamp:2
			}
		.ftit{font-size: 26rpx;color:#999;margin-top:15rpx;}
		.flex{margin-top:30rpx;align-items: center;
			.price{flex: 1;color:#f04447;font-size: 32rpx;font-weight: bold;}
			.num{color: #999;}
		}
	}
	// 上传凭证
	.upload{
		padding: 30rpx;
		.tit{font-size:30rpx;font-weight: bold;}
	}
	.shotBox{margin-top:20rpx;
		.shotImg{
			display: flex;padding: 10px 0;
			.img{width: 200rpx;height: 200rpx; margin-right:20rpx;position: relative;
				image{width: 100%;height: 100%;object-fit: cover;}
				text{position: absolute;display: block;width: 40rpx;height: 40rpx;text-align: center;
				line-height: 40rpx;right:0rpx;background: rgba(0,0,0,0.6);color:#fff;border-radius: 50%;
				top: -10rpx;
				}
			}
		}
		.shot{background:#eee;border: 1px dashed #ddd;width:200rpx;height: 200rpx;
			text-align: center;border-radius: 10rpx;
			.icon{margin-top:20rpx;}
			.icon .iconfont{font-size:80rpx;}
			.shotInfo text{display: block;font-size: 21rpx;color:#999;}
		}
	}
</style>
